<template>
  <div class="main" style="height: 100%">
    <!-- 手机论坛 发布说说 -->
    <el-container>
      <el-header height="auto">
        <nav class="searchNav">
          <div>
            <h2>手机型号快速查询</h2>
            <div style="display: flex">
              <el-select
                v-model="selectVal"
                filterable
                remote
                reserve-keyword
                clearable
                placeholder="请输入想要查询的手机型号"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.phone_name"
                  :value="item.phone_name"
                >
                </el-option>
              </el-select>
              <el-button @click="phoneSearch">查询</el-button>
            </div>
          </div>
        </nav>
      </el-header>
      <el-main>
        <el-row v-if="phonedetail && selectVal.length">
          <singlephone :phonedetail="phonedetail" />
        </el-row>
        <el-row>
          <h2>
            数据机广场
            <el-button type="primary" @click="toEdit()"
              >新建感想<i class="el-icon-edit el-icon--right"
            /></el-button>
          </h2>
          <card :articleData.sync="articleData" />
        </el-row>
      </el-main>
      <el-footer>
        <el-pagination
          layout="prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

// components
import card from "./components/card.vue";
import singlephone from "@/views/singlephone/singlephone.vue";

export default {
  name: "HomeSquare",
  data() {
    return {
      // 文章数据
      articleData: [],
      // 分页相关
      // 1. 总条数
      totalCount: 1,
      // 2. 默认显示的条数
      pageSize: 5,
      // 3. 默认显示第几页
      currentPage: 1,

      // 快速搜寻相关
      selectVal: [],
      loading: false,
      options: [],
      phoneName: null,
      phonedetail: null,

      title: "",
      content: "",
      cate: "",
      // 用户的信息
      userNickname: "",
      userpic: "",

      // 感想的总长度
      acticalLen: 0,
      commentList: [
        {
          id: 1,
          commentUser: {
            id: 1,
            nickName: "花非花111",
            avatar:
              "http://qzapp.qlogo.cn/qzapp/101483738/6637A2B6611592A44A7699D14E13F7F7/50",
          },
          content:
            "<a style='text-decoration:none;color: #409eff ' href='https://blog.csdn.net/abcwanglinyong/'>我的CSDN博客地址</a>[害羞][害羞][害羞]<br/>" +
            "我的微信公众号：<br/>",
          createDate: "2019-9-23 17:36:02",
          childrenList: [
            {
              id: 1,
              commentUser: {
                id: 2,
                nickName: "坏菠萝",
                avatar: "",
              },
              targetUser: {
                id: 1,
                nickName: "花非花",
                avatar:
                  "http://qzapp.qlogo.cn/qzapp/101483738/6637A2B6611592A44A7699D14E13F7F7/50",
              },
              content: "真的就很棒！很Nice!",
              createDate: "2019-9-23 17:45:26",
            },
          ],
        },
      ],
    };
  },

  components: {
    card,
    singlephone,
  },
  async mounted() {
    // 设置背景颜色
    document.querySelector("body");
    // 获取文章数据
    await axios({
      method: "post",
      headers: {
        Authorization: this.$store.state.token,
      },
      data: {
        preVal: this.currentPage,
        count: this.pageSize,
      },
      url: "http://localhost:8081/my/article/list",
    }).then((res) => {
      this.articleData = res.data.data;
    });
    // 获取文章页数
    await axios({
      method: "get",
      headers: {
        Authorization: this.$store.state.token,
      },
      url: "http://localhost:8081/my/article/getArticlePage",
    }).then((res) => {
      this.totalCount = res.data.data[0].num;
    });
  },
  watch: {
    selectVal: {
      handler() {
        this.phonedetail = null;
      },
    },
  },
  methods: {
    async remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        await axios({
          method: "get",
          headers: {
            Authorization: this.$store.state.token,
          },
          timeout: 2000,
          url: "http://localhost:8081/api/brand/fuzzy",
          params: {
            fuzzyVal: query,
          },
        })
          .then((res) => {
            this.loading = false;
            this.options.splice(0, this.options.length, ...res.data.data);
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    toEdit() {
      this.$router.push("/home/edit");
    },
    phoneSearch() {
      if (this.selectVal) {
        this.phonedetail = this.options.filter(
          (item) => item.phone_name == this.selectVal
        )[0];
      }
    },
    // 分页相关
    async currentChange(e) {
      await axios({
        method: "post",
        headers: {
          Authorization: this.$store.state.token,
        },
        data: {
          preVal: e,
          count: this.pageSize,
        },
        url: "http://localhost:8081/my/article/list",
      }).then((res) => {
        this.articleData.splice(0, this.articleData.length, ...res.data.data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .el-container {
    margin-top: 1rem;
    position: relative;
    .el-header {
      display: flex;
      width: 100%;
      background-color: #fff;
      flex-direction: column;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 999;
      padding-bottom: 1rem;
      /deep/ .el-upload {
        width: 40px;
        height: 40px;
        line-height: 45px;
      }
      .el-button {
        height: 60;
        // line-height: rem;
      }
    }
    .el-main {
      display: block;
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        .el-col {
          margin-top: 1.25rem;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #f6ffc6;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
    }
  }
}
</style>
